<head th:fragment="header">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>RicoZhou 博客</title>
<link href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"
	rel="stylesheet" />
<link href="/css/blog/clean-blog.css"
	th:href="@{/css/blog/clean-blog.css}" rel="stylesheet">
<link href="/css/font-awesome.min.css"
	th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
<style type="text/css">
@media ( max-width :768px) {
	.side {
		display: none;
	}
}

@media ( min-width :768px) {
	.side {
		display: block;
	}
}

.side {
	position: fixed;
	width: 50px;
	right: 5%;
	bottom: 15%;
	z-index: 100;
}

.side ul {
	list-style: none;
}

.side ul li {
	width: 35px;
	height: 35px;
	float: left;
	position: relative;
	margin-top: 9px;
}

.side ul li .qqbdimg {
	padding: 7px;
	margin-top: 5px;
	margin-bottom: 1px;
	/* margin-left: 22px; */
	position: absolute;
	width: 53px;
	height: 54px;
	/* margin-left: 9px; */
	bottom: 0;
	right: -7px;
	transition: all 0.3s;
	background: #fff;
	opacity: 0;
	filter: Alpha(opacity = 80);
	color: #fff;
	font: 14px/54px "微软雅黑";
	overflow: hidden;
}

.side ul li .qqbdimg:hover {
	overflow: hidden;
	padding: 7px;
	margin-top: 5px;
	width: 124px;
	height: 124px;
	opacity: 1;
	z-index: 100;
	right: 0;
	background: rgb(142, 142, 142);
}

.side ul li img {
	width: 100%;
	height: 100%;
}

.side ul li .sidetop {
	height: 100%;
	display: block;
	background: #2f4050;
	padding: 2px 0px;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	opacity: .5;
}
</style>
</head>
<nav th:fragment="nav">
	<div class="container">
		<div class="navbar-header page-scroll">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/" style="font-size: 24px;">RicoZhou</a>
		</div>
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">主页</a></li>
				<li><a href="/rzblog/open/page/about" target="_Blank">关于</a></li>
				<li><a href="/rzblog/open/page/communication" target="_Blank">交流</a></li>
				<li><a href="/login">登录</a></li>
			</ul>
		</div>
	</div>
</nav>
<div th:fragment="footer">
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
					<ul class="list-inline text-center">
						<li><a href="https://jq.qq.com/?_wv=1027&k=5ICuFaQ"
							target="_Blank" title=""> <span class="fa-stack fa-lg"> <i
									class="fa fa-circle fa-stack-2x"></i> <i
									class="fa fa-qq fa-stack-1x fa-inverse"></i>
							</span>
						</a></li>
						<li><a href="https://www.oschina.net/p/bootdo"
							target="_Blank" title="源码参考码云bootdo，详情请见bootdo"> <span class="fa-stack fa-lg"> <i
									class="fa fa-circle fa-stack-2x"></i> <i
									class="fa fa-home fa-stack-1x fa-inverse"></i>
							</span>
						</a></li>
						<li><a href="https://github.com/lcg0124/bootdo.git"
							target="_Blank" title="源码参考githubbootdo，详情请见bootdo"> <span class="fa-stack fa-lg"> <i
									class="fa fa-circle fa-stack-2x"></i> <i
									class="fa fa-github fa-stack-1x fa-inverse"></i>
							</span>
						</a></li>
					</ul>
					<p class="copyright text-muted">Copyright &copy; rzspider.com
						2018</p>
					<p class="copyright text-muted">xxx鲁ICP备17042918号</p>

				</div>
			</div>
		</div>
	</footer>
	<div class="side">
		<ul>
			<li>
				<div class="qqbdimg">
					<img src="/img/blog/qqbootdo.png" title="学习交流" />
				</div> <a class="sidetop" id="qqbd" href="javascript:scroll(0,0)"
				title="学习交流"><i class="fa fa-qq"></i></a>
			</li>
			<li><a class="sidetop" href="javascript:scroll(0,0)"
				title="返回顶部"><i class="fa fa-arrow-up"></i></a></li>
		</ul>
	</div>

	<script src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<script src="/js/plugins/layer/layer.js"
		th:src="@{/js/plugins/layer/layer.js}"></script>
	<script src="/js/plugins/summernote/ajax-util.js"
		th:src="@{/js/plugins/summernote/ajax-util.js}"></script>
	<script src="/js/blog/clean-blog.min.js"
		th:src="@{/js/blog/clean-blog.min.js}"></script>
	<script src="/js/plugins/summernote/summernote.min.js"
		th:src="@{/js/plugins/summernote/summernote.min.js}"></script>
	<script src="/js/plugins/summernote/summernote-zh-CN.js"
		th:src="@{/js/plugins/summernote/summernote-zh-CN.js}"></script>
</div>

